<template>
  <v-app>
    <v-container class="fill-height">
      <v-card
        :min-width="$vuetify.breakpoint.smAndDown ? '80vw' : '30vw'"
        class="mx-auto"
      >
        <v-card-title class="justify-center">
          xxxx 信息化系统
        </v-card-title>

        <v-card-text class="pb-0 mt-5">
          <v-text-field
            v-model="username"
            label="用户名"
            outlined
            placeholder="username"
          ></v-text-field>
          <v-text-field
            v-model="password"
            label="密码"
            outlined
            placeholder="password"
          ></v-text-field>
        </v-card-text>

        <v-card-actions>
          <v-container>
            <v-row class="justify-center" no-gutters>
              <v-col md="auto">
                <v-btn color="primary" rounded @click="onLoginClick">
                  登陆
                </v-btn>
              </v-col>
              <v-col md="auto">
                <v-btn class="ml-2" color="" rounded text>
                  切换登录方式
                </v-btn>
              </v-col>
            </v-row>
          </v-container>
        </v-card-actions>
      </v-card>
    </v-container>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import api from "@/api";
import { LoginResponse } from "@/model/ResponseModel";
import { SystemTool } from "@/utils/SystemTool";
import FrameConfig from "@/model/frame/FrameConfig";
import CryptTool from "@/utils/frame/CryptTool";

@Component({})
export default class Login extends Vue {
  // region Prop
  // endregion
  // region Data
  username = "";
  password = "";
  // endregion
  // region computed
  // endregion
  // region watch
  // endregion
  // region method
  onLoginClick() {
    api.user
      .login(this.username, CryptTool.md5(this.password))
      .then(rsp => {
        const _rspData: LoginResponse = rsp.data;

        localStorage.setItem(FrameConfig.APP_TOKEN_NAME, _rspData.token);

        this.$store.set<boolean>("system/isLogin", true);
        this.$store.set<string>("system/token", _rspData.token);

        SystemTool.decodeToken();

        this.$router.push("/");
      })
      .catch(err => {
        console.log(err);
      });
  }

  // endregion
  // region hook
  created() {
    if (this.$store.get<boolean>("system/isLogin")) {
      this.$router.push("/");
    }
  }

  // endregion
}
</script>

<style lang="scss"></style>
